<template>
  <div id="home">
      <nav-bar class="home-nav">
          <div slot="center">购物街</div>
      </nav-bar>
      <tab-control ref="tabControlCopy"
        class="tab-control"
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
        v-show="isTabFixed" />
      <scroll class="content" 
              ref="content" 
              :probe-type="3" 
              @scroll="contentScroll"
              :pull-up-load="true"
              @pullingUp="loadMore">
        <home-swiper :banner="banner" @swiperImageLoad="swiperImageLoad"></home-swiper>
        <recommend-view :recommend="recommend"></recommend-view>
        <feature-view></feature-view>
        <tab-control ref="tabControl" 
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"/>
        <goods-list :goods="showGoods"></goods-list>
      </scroll>
      <back-top @click.native="backClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'

import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backTop/BackTop'

import { getHomeMultidata, getHomeGoods } from 'network/home'
import { debounce } from 'common/utils.js'
  export default {
    name: "Home",
    components: {
        HomeSwiper,
        RecommendView,
        FeatureView,
        NavBar,
        TabControl,
        GoodsList,
        Scroll,
        BackTop
    },
    data() {
        return {
            banner: [],
            recommend: [],
            currentType: 'pop',
            goods: {
              'pop': {
                page: 0,
                list: []
              },
              'new': {
                page: 0,
                list: []
              },
              'sell': {
                page: 0,
                list: []
              }
            },
            isShowBackTop: false,
            taboffsetTop: 0,
            isTabFixed: false,
            saveY: 0
        }
    },
    computed: {
      showGoods() {
        return this.goods[this.currentType].list
      }
    },
    created() {
        // 请求多个数据
        this.getHomeMultidata()
        // 请求商品数据
        this.getHomeGoods('pop')
        this.getHomeGoods('new')
        this.getHomeGoods('sell')
    },
    mounted() {
      // 监听item中图片加载完成
        // const func = this.$refs.content.bscroll.refresh
        const func = this.$refs.content.refresh
        const refresh = debounce(func, 500)
        this.$bus.$on('itemImageLoad', () => {
          refresh()
        })
        // this.taboffsetTop = this.$refs.tabControl.$el.offsetTop
        // console.log('offsetTop', this.taboffsetTop)
    },
    activated() {
      this.$refs.content.bscroll.scrollTo(0, this.saveY, 0)
      this.$refs.content.bscroll.refresh()
    },
    deactivated() {
      this.saveY = this.$refs.content.bscroll.y
    },
    methods: {
      /**
       * 监听事件的方法
       */
      tabClick(index) {
        switch(index) {
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
        }
        this.$refs.tabControlCopy.currentIndex = index
        this.$refs.tabControl.currentIndex = index
      },
      backClick() {
        console.log('click...')
        this.$refs.content.bscroll.scrollTo(0, 0, 500)
      },
      contentScroll(position) {
        this.isShowBackTop = -(position.y) > 1000
        this.isTabFixed = -(position.y) > this.taboffsetTop
      },
      loadMore() {
        this.getHomeGoods(this.currentType)
        this.$refs.content.finishPullUp()
        // this.$refs.content.bscroll.refresh()
      },
      swiperImageLoad() {
        this.taboffsetTop = this.$refs.tabControl.$el.offsetTop - 40
        console.log('offsetTop', this.taboffsetTop)
      },
      /**
       * 请求数据的方法
       */
      getHomeMultidata() {
        getHomeMultidata().then(res => {
             console.log('res', res)
             this.banner = res.data.banner.list
             this.recommend = res.data.recommend.list
        })
      },
      getHomeGoods(type) {
        const page = this.goods[type].page + 1
        getHomeGoods(type, page).then(res => {
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page += 1

          this.$refs.content.bscroll.finishPullUp()
        })
      }
    }
  }
</script>

<style scoped>
  #home {
    padding-top: 44px;
    height: 100vh;
    position: relative;
  }
  .home-nav {
      background-color: var(--color-tint);
      color: white;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9; 
  }
  .content {
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    top: 0;
  }
  .tab-control {
    position: relative;
    z-index: 9;
  }
</style>